import {
    Image,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    useWindowDimensions,
    Animated,
    FlatList,
    RefreshControl, ActivityIndicator, ImageBackground, Modal
} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import {SceneMap, TabView} from "react-native-tab-view";
import * as React from "react";
import {useEffect, useState} from "react";

enum activityType {
   join,
   create,
   wait
};

const JoinRoute = ({ currentIndex }) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [triggerRefresh, setTriggerRefresh] = useState(false);
    const [page, setPage] = useState(1);
    const [refreshingText, setRefreshingText] = useState('下拉刷新');
    const scrollY = new Animated.Value(0); // 用于跟踪滚动偏移

    const [foundTextModel, setFoundTextModel] = useState(false);

    const router = useRouter();

    // 自定义加载图标组件
    const RefreshControlHeader = ({ refreshing, text }) => (
        refreshing &&  <View style={styles.refreshHeader}>
            {/*{refreshing && <Image source={require('./path/to/your/loading-icon.gif')} style={styles.refreshIcon} />} /!* 替换为你的加载图标 *!/*/}
            <Text style={styles.refreshText}>{text}</Text>
        </View>
    );

    // 初次加载数据
    useEffect(() => {
        loadMoreData();
    }, []);

    useEffect(() => {
        if (triggerRefresh) {
            handleRefresh();
            setTriggerRefresh(false); // Reset trigger
        }
    }, [triggerRefresh]);

    const loadMoreData = () => {
        if (loading) return;

        setLoading(true);
        // 模拟网络请求来获取更多数据
        setTimeout(() => {
            const newData = [
                {
                    type: 0,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 1,
                    title: '超市超市超市超市'
                },
                {
                    type: 2,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 3,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 2,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 4,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 4,
                    title: 'dwajdwajdiw'
                }
            ]
            setData((prevData) => [...prevData, ...newData]);
            setPage((prevPage) => prevPage + 1);
            setLoading(false);
        }, 100);
    };

    const handleRefresh = () => {
        setRefreshing(true);
        setRefreshingText('正在刷新...');
        setPage(1);

        // 模拟网络请求来获取新数据
        setTimeout(() => {
            const newData = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);
            setData(newData);
            setRefreshing(false);
            setRefreshingText('下拉刷新');
        }, 100);
    };

    const renderFooter = () => {
        if (!loading) return null;
        if (data.length <= 0) return null;
        return (
            <View style={{ paddingVertical: 10, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                <ActivityIndicator size="small" />
                <Text style={{ textAlign: 'center', fontSize: 14, color: "#676978", marginLeft: 5, }}>疯狂加载中</Text>
            </View>
        );
    };

    const handleScroll = Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        {
            useNativeDriver: false,
            listener: event => {
                const offsetY = event.nativeEvent.contentOffset.y;

                if (!refreshing) {
                    // 根据下拉距离更新文本
                    if (offsetY < -100) {
                        setRefreshingText('松开刷新'); // 超过 -100 的偏移量显示松开刷新
                    } else if (offsetY < 0) {
                        setRefreshingText('下拉刷新'); // 在 -100 到 0 之间时显示下拉刷新
                    }
                }
            },
        }
    );

    const onScrollEnd = () => {
        scrollY.addListener(({ value }) => {
            if (!refreshing && value < -100) {
                setTriggerRefresh(true); // 触发刷新
            }
        });
    };

    const ActivityItem = ({ item }) => {
        const { type } = item;
        return (
            <View>
                <View style={styles.groupStateContainer}>
                    <View style={styles.groupInfoWarp}>
                        <View style={styles.groupAvator}>
                            {/*<Text>ava</Text>*/}
                        </View>
                        <View style={styles.groupInfoCotent}>
                            <View>
                                <Text style={styles.groupInfoTitle}>音乐社</Text>
                            </View>
                            <View style={{ marginTop: 6 }}>
                                <Text style={styles.groupInfoTotal}>成员数:546人</Text>
                            </View>
                        </View>
                    </View>
                   <TouchableOpacity onPress={() => setFoundTextModel(true)}>
                       <View style={styles.groupOut}>
                           <Text style={styles.groupOutText}>退出</Text>
                       </View>
                   </TouchableOpacity>
                </View>
            </View>
        )
    };

    return (
        <>
            <FlatList
                data={data}
                renderItem={({ item }) => <ActivityItem item={item} />}
                keyExtractor={(item, index) => index.toString()}
                onEndReached={loadMoreData}
                onEndReachedThreshold={0.5} // 当滚动到距离底部还有50%的时候触发
                ListFooterComponent={renderFooter}
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        // onRefresh={handleRefresh} // 绑定刷新函数
                        title={refreshing ? '' : refreshingText} // 在正在刷新状态时不显示文本
                        titleColor="#333" // 设置提示文字颜色
                        tintColor="transparent" // 隐藏刷新指示器
                    />
                }
                onScroll={handleScroll}
                onScrollEndDrag={onScrollEnd}
                ListHeaderComponent={<RefreshControlHeader refreshing={refreshing} text={refreshingText} />}
            />

            <Modal
                animationType="fade"
                transparent={true}
                visible={foundTextModel}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={(event) => {
                        if (event.target === event.currentTarget) {
                            setFoundTextModel(false);
                        }
                    }}
                    style={styles.becameModelContainer}
                >
                    <View style={styles.becameModelWrap}>
                        <View style={styles.becameModelTitle}>
                            <Text style={styles.becameModelTitleText}>退出</Text>
                        </View>
                        <View>
                            <Text style={{textAlign: "center", marginBottom: 34, color: "#676978"}}>确定退出社群</Text>
                        </View>
                        <View style={styles.becameFootWrap}>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.cancelBtn}>
                                    <Text style={styles.cancelBtnText} >取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>
        </>
    );
};

const CreateRoute = ({ currentIndex }) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [triggerRefresh, setTriggerRefresh] = useState(false);
    const [page, setPage] = useState(1);
    const [refreshingText, setRefreshingText] = useState('下拉刷新');
    const scrollY = new Animated.Value(0); // 用于跟踪滚动偏移

    const [foundTextModel, setFoundTextModel] = useState(false);

    const router = useRouter();

    // 自定义加载图标组件
    const RefreshControlHeader = ({ refreshing, text }) => (
        refreshing &&  <View style={styles.refreshHeader}>
            {/*{refreshing && <Image source={require('./path/to/your/loading-icon.gif')} style={styles.refreshIcon} />} /!* 替换为你的加载图标 *!/*/}
            <Text style={styles.refreshText}>{text}</Text>
        </View>
    );

    // 初次加载数据
    useEffect(() => {
        loadMoreData();
    }, []);

    useEffect(() => {
        if (triggerRefresh) {
            handleRefresh();
            setTriggerRefresh(false); // Reset trigger
        }
    }, [triggerRefresh]);

    const loadMoreData = () => {
        if (loading) return;

        setLoading(true);
        // 模拟网络请求来获取更多数据
        setTimeout(() => {
            const newData = [
                {
                    type: 0,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 1,
                    title: '超市超市超市超市'
                },
                {
                    type: 2,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 3,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 2,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 4,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 4,
                    title: 'dwajdwajdiw'
                }
            ]
            setData((prevData) => [...prevData, ...newData]);
            setPage((prevPage) => prevPage + 1);
            setLoading(false);
        }, 100);
    };

    const handleRefresh = () => {
        setRefreshing(true);
        setRefreshingText('正在刷新...');
        setPage(1);

        // 模拟网络请求来获取新数据
        setTimeout(() => {
            const newData = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);
            setData(newData);
            setRefreshing(false);
            setRefreshingText('下拉刷新');
        }, 100);
    };

    const renderFooter = () => {
        if (!loading) return null;
        if (data.length <= 0) return null;
        return (
            <View style={{ paddingVertical: 10, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                <ActivityIndicator size="small" />
                <Text style={{ textAlign: 'center', fontSize: 14, color: "#676978", marginLeft: 5, }}>疯狂加载中</Text>
            </View>
        );
    };

    const handleScroll = Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        {
            useNativeDriver: false,
            listener: event => {
                const offsetY = event.nativeEvent.contentOffset.y;

                if (!refreshing) {
                    // 根据下拉距离更新文本
                    if (offsetY < -100) {
                        setRefreshingText('松开刷新'); // 超过 -100 的偏移量显示松开刷新
                    } else if (offsetY < 0) {
                        setRefreshingText('下拉刷新'); // 在 -100 到 0 之间时显示下拉刷新
                    }
                }
            },
        }
    );

    const onScrollEnd = () => {
        scrollY.addListener(({ value }) => {
            if (!refreshing && value < -100) {
                setTriggerRefresh(true); // 触发刷新
            }
        });
    };

    const ActivityItem = ({ item }) => {
        const { type } = item;
        return (
            <View>
                <View style={styles.groupStateContainer}>
                    <View style={styles.groupInfoWarp}>
                        <View style={styles.groupAvator}>
                            {/*<Text>ava</Text>*/}
                        </View>
                        <View style={styles.groupInfoCotent}>
                            <View>
                                <Text style={styles.groupInfoTitle}>音乐社</Text>
                            </View>
                            <View style={{ marginTop: 6 }}>
                                <Text style={styles.groupInfoTotal}>成员数:546人</Text>
                            </View>
                        </View>
                    </View>
                    <TouchableOpacity>
                        <View style={styles.groupCreateBtn}>
                            <Text style={styles.groupCreateBtnText}>管理</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        )
    };

    return (
        <>
            <FlatList
                data={data}
                renderItem={({ item }) => <ActivityItem item={item} />}
                keyExtractor={(item, index) => index.toString()}
                onEndReached={loadMoreData}
                onEndReachedThreshold={0.5} // 当滚动到距离底部还有50%的时候触发
                ListFooterComponent={renderFooter}
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        // onRefresh={handleRefresh} // 绑定刷新函数
                        title={refreshing ? '' : refreshingText} // 在正在刷新状态时不显示文本
                        titleColor="#333" // 设置提示文字颜色
                        tintColor="transparent" // 隐藏刷新指示器
                    />
                }
                onScroll={handleScroll}
                onScrollEndDrag={onScrollEnd}
                ListHeaderComponent={<RefreshControlHeader refreshing={refreshing} text={refreshingText} />}
            />

            <Modal
                animationType="fade"
                transparent={true}
                visible={foundTextModel}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={(event) => {
                        if (event.target === event.currentTarget) {
                            setFoundTextModel(false);
                        }
                    }}
                    style={styles.becameModelContainer}
                >
                    <View style={styles.becameModelWrap}>
                        <View style={styles.becameModelTitle}>
                            <Text style={styles.becameModelTitleText}>退出</Text>
                        </View>
                        <View>
                            <Text style={{textAlign: "center", marginBottom: 34, color: "#676978"}}>确定退出活动</Text>
                        </View>
                        <View style={styles.becameFootWrap}>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.cancelBtn}>
                                    <Text style={styles.cancelBtnText} >取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>

            </Modal>
        </>
    );
};

const WaitRoute = ({ currentIndex }) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [triggerRefresh, setTriggerRefresh] = useState(false);
    const [page, setPage] = useState(1);
    const [refreshingText, setRefreshingText] = useState('下拉刷新');
    const scrollY = new Animated.Value(0); // 用于跟踪滚动偏移

    const [foundTextModel, setFoundTextModel] = useState(false);

    const router = useRouter();

    // 自定义加载图标组件
    const RefreshControlHeader = ({ refreshing, text }) => (
        refreshing &&  <View style={styles.refreshHeader}>
            {/*{refreshing && <Image source={require('./path/to/your/loading-icon.gif')} style={styles.refreshIcon} />} /!* 替换为你的加载图标 *!/*/}
            <Text style={styles.refreshText}>{text}</Text>
        </View>
    );

    // 初次加载数据
    useEffect(() => {
        loadMoreData();
    }, []);

    useEffect(() => {
        if (triggerRefresh) {
            handleRefresh();
            setTriggerRefresh(false); // Reset trigger
        }
    }, [triggerRefresh]);

    const loadMoreData = () => {
        if (loading) return;

        setLoading(true);
        // 模拟网络请求来获取更多数据
        setTimeout(() => {
            const newData = [
                {
                    type: 0,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 1,
                    title: '超市超市超市超市'
                },
                {
                    type: 2,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 3,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 2,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 4,
                    title: 'dwajdwajdiw'
                },
                {
                    type: 4,
                    title: 'dwajdwajdiw'
                }
            ]
            setData((prevData) => [...prevData, ...newData]);
            setPage((prevPage) => prevPage + 1);
            setLoading(false);
        }, 100);
    };

    const handleRefresh = () => {
        setRefreshing(true);
        setRefreshingText('正在刷新...');
        setPage(1);

        // 模拟网络请求来获取新数据
        setTimeout(() => {
            const newData = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);
            setData(newData);
            setRefreshing(false);
            setRefreshingText('下拉刷新');
        }, 100);
    };

    const renderFooter = () => {
        if (!loading) return null;
        if (data.length <= 0) return null;
        return (
            <View style={{ paddingVertical: 10, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                <ActivityIndicator size="small" />
                <Text style={{ textAlign: 'center', fontSize: 14, color: "#676978", marginLeft: 5, }}>疯狂加载中</Text>
            </View>
        );
    };

    const handleScroll = Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        {
            useNativeDriver: false,
            listener: event => {
                const offsetY = event.nativeEvent.contentOffset.y;

                if (!refreshing) {
                    // 根据下拉距离更新文本
                    if (offsetY < -100) {
                        setRefreshingText('松开刷新'); // 超过 -100 的偏移量显示松开刷新
                    } else if (offsetY < 0) {
                        setRefreshingText('下拉刷新'); // 在 -100 到 0 之间时显示下拉刷新
                    }
                }
            },
        }
    );

    const onScrollEnd = () => {
        scrollY.addListener(({ value }) => {
            if (!refreshing && value < -100) {
                setTriggerRefresh(true); // 触发刷新
            }
        });
    };

    const ActivityItem = ({ item }) => {
        const { type } = item;
        return (
            <View>
                <View style={styles.groupStateContainer}>
                    <View style={styles.groupInfoWarp}>
                        <View style={styles.groupAvator}>
                            {/*<Text>ava</Text>*/}
                        </View>
                        <View style={styles.groupInfoCotent}>
                            <View>
                                <Text style={styles.groupInfoTitle}>音乐社</Text>
                            </View>
                            <View style={{ marginTop: 6 }}>
                                <Text style={styles.groupInfoTotal}>成员数:546人</Text>
                            </View>
                        </View>
                    </View>
                    <TouchableOpacity>
                        <View>
                            <Text style={styles.groupOutText}>审核中</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        )
    };

    return (
        <>
            <FlatList
                data={data}
                renderItem={({ item }) => <ActivityItem item={item} />}
                keyExtractor={(item, index) => index.toString()}
                onEndReached={loadMoreData}
                onEndReachedThreshold={0.5} // 当滚动到距离底部还有50%的时候触发
                ListFooterComponent={renderFooter}
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        // onRefresh={handleRefresh} // 绑定刷新函数
                        title={refreshing ? '' : refreshingText} // 在正在刷新状态时不显示文本
                        titleColor="#333" // 设置提示文字颜色
                        tintColor="transparent" // 隐藏刷新指示器
                    />
                }
                onScroll={handleScroll}
                onScrollEndDrag={onScrollEnd}
                ListHeaderComponent={<RefreshControlHeader refreshing={refreshing} text={refreshingText} />}
            />

            <Modal
                animationType="fade"
                transparent={true}
                visible={foundTextModel}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={(event) => {
                        if (event.target === event.currentTarget) {
                            setFoundTextModel(false);
                        }
                    }}
                    style={styles.becameModelContainer}
                >
                    <View style={styles.becameModelWrap}>
                        <View style={styles.becameModelTitle}>
                            <Text style={styles.becameModelTitleText}>退出</Text>
                        </View>
                        <View>
                            <Text style={{textAlign: "center", marginBottom: 34, color: "#676978"}}>确定退出活动</Text>
                        </View>
                        <View style={styles.becameFootWrap}>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.cancelBtn}>
                                    <Text style={styles.cancelBtnText} >取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>

            </Modal>
        </>
    );
};

// 自定义的 TabBar 组件
const CustomTabBar = ({ navigationState, position, setIndex }) => {
    // 创建指示器的动态宽度和位置
    const inputRange = navigationState.routes.map((_, i) => i);
    const layoutWith = scaleSize(350);
    const translateX = position.interpolate({
        inputRange,
        outputRange: inputRange.map(i => i * layoutWith / 3 + ((layoutWith / 3) - layoutWith / 13) / 2),
        // outputRange: [48, 162], // 这里的值需要根据实际情况计算
    });


    return (
        <View style={styles.tabHeader}>
            <View style={styles.tabBar}>
                {navigationState.routes.map((route, i) => (
                    <TouchableOpacity
                        key={route.key}
                        onPress={() => setIndex(i)}
                        style={styles.tabItem}>
                        <Text style={{ color: navigationState.index === i ? '#EC6138' : 'black', textAlign: "left" }}>
                            {route.title}
                        </Text>
                    </TouchableOpacity>
                ))}
                {/* 自定义指示器 */}
                <Animated.View
                    style={[
                        styles.indicator,
                        { transform: [{ translateX }] },
                        { width: scaleSize(26) } // 指示器的宽度
                    ]}
                />
            </View>
        </View>
    );
};


export default function activityRouteScreen() {

    const router = useRouter();
    const layout = useWindowDimensions();


    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'join', title: '我参加的' },
        { key: 'create', title: '我创建的' },
        { key: 'check', title: '社群审核' },
    ]);

    // const renderScene = SceneMap({
    //     join: JoinRoute,
    //     create: JoinRoute,
    //     check: JoinRoute
    // });

    const renderScene = ({ route }) => {
        switch (route.key) {
            case 'join':
                return <JoinRoute currentIndex={index} key={'join'}/>; // 传递当前索引给 FirstRoute
            case 'create':
                return <CreateRoute currentIndex={index} key={'create'} />;
            case 'check':
                return <WaitRoute currentIndex={index} key={'check'} />;
            default:
                return null;
        }
    };


    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '我的社群', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#fff', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <TabView
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
                initialLayout={{ width: layout.width }}
                renderTabBar={(props) => <CustomTabBar {...props} setIndex={setIndex} />} // 使用自定义的 TabBar
            />
        </View>

    );
}

const styles = StyleSheet.create({
    scene: {
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
    },
    tabBar: {
        flexDirection: 'row',
        backgroundColor: 'white',
        position: 'relative', // 需要相对定位来放置指示器
        width:scaleSize(350),
        margin: "auto",
    },
    tabItem: {
        flex: 1,
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 9,
        fontSize: 14,
        color: "#2A2B30",
    },
    indicator: {
        position: 'absolute',
        height: 3,
        backgroundColor: '#EC6138',
        bottom: 0,
        borderRadius: 5,
    },
    tabHeader: {
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderBottomColor: "#F1F2F5",
        marginBottom: 12,
    },
    refreshHeader: {
        alignItems: 'center',
        padding: 20,
    },
    refreshIcon: {
        width: 12,
        height: 12,
        marginBottom: 10,
    },
    refreshText: {
        fontSize: 12,
        color: '#333',
    },
    groupStateContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginLeft: 12,
        marginRight: 12,
        marginBottom: 12,
        backgroundColor:"#fff",
        paddingRight: 12,
    },
    groupInfoWarp: {
        flexDirection: 'row',
        alignItems: "center",
        marginTop: 16,
        marginBottom: 16,
        marginLeft: 12,
        marginRight: 12,
    },
    groupAvator: {
        width: scaleSize(52),
        height: scaleSize(52),
        backgroundColor: "blue",
        borderRadius: 50,
    },
    groupInfoCotent: {
        marginLeft: 10,
    },
    groupInfoTitle: {
        // fontWeight: "bold",
    },
    groupInfoTotal: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    groupOut: {
        width: 56,
        height: 26,
        borderColor: "#EC6138",
        borderWidth: 1,
        borderRadius: 13,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    groupOutText: {
        color: "#EC6138",
        fontSize: 12,
    },

    groupCreateBtn: {
        width: 56,
        height: 26,
        backgroundColor: "#EC6138",
        borderRadius: 13,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    groupCreateBtnText: {
        color: "#fff",
        fontSize: 12,
    },
    becameModelContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",
    },
    becameModelWrap: {
        width: scaleSize(296),
        // height: scaleSize(270),
        backgroundColor: "#fff",
        margin: "auto",
        borderRadius: 8,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18,
        paddingBottom: 20,
        position: "relative",
        zIndex: 9,
    },
    becameModelTitle: {
        marginBottom: 14,
    },
    becameModelTitleText: {
        textAlign: "center",
        fontSize: 16,
        // fontWeight: "bold"
        // color: "#2A2B30"
    },
    becameFootWrap: {
        // marginTop: 58,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 10,
        paddingRight: 10,
    },
    cancelBtn: {
        backgroundColor: "#F7F8F9",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    cancelBtnText: {
        // fontWeight: "bold",
    },
    okBtnText: {
        color: "#fff",
        fontWeight: "bold",
    },
    okBtn: {
        backgroundColor: "#EC6138",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
});
